<template>
	<view class="goodItem">
		<view class="cover">
			<image :src="props.goodInfo.cover" style="width: 100%;height: 100%;" mode="">
			</image>
		</view>

		<view class="goodInfo">
			<view class="goodName">
				{{props.goodInfo.name}}
			</view>

			<view class="goodCategory">
				{{props.goodInfo.category}}
			</view>

			<view class="goodPrice">
				$ {{props.goodInfo.price}}
			</view>
		</view>

	</view>
</template>

<script setup>
	const props = defineProps({
		goodInfo: Object
	})
</script>

<style lang="scss">
	.goodItem {
		box-sizing: content-box;
		width: 440rpx;
		// height: 643rpx;
		display: inline-block;
		margin: 0 50rpx;
		position: relative;
		padding-top: 95rpx;



		&:nth-child(1) {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}

		.cover {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -95rpx);
			border-radius: 50%;
			width: 314rpx;
			height: 314rpx;
			// background-color: black;
			overflow: hidden;
		}



		.goodInfo {
			height: 540rpx;
			width: 100%;
			border-radius: 40rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: end;
			padding-bottom: 86rpx;
			overflow: hidden;

			.goodName {
				font-size: 44rpx;
				font-weight: 600;
				letter-spacing: 0px;
				line-height: 44.6rpx;
				color: rgba(0, 0, 0, 1);
				width: 80%;
				text-overflow: ellipsis;
				opacity: 0.9;
				text-align: center;
			}

			.goodCategory {
				margin-top: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0px;
				line-height: 37.6px;
				color: rgba(134, 134, 134, 1);
				opacity: 0.9;
			}

			.goodPrice {
				margin-top: 32rpx;
				font-size: 34rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 39.8rpx;
				color: rgba(89, 86, 233, 1);
			}
		}
	}
</style>